<template>
  <nav class="w-full z-50 flex text-white header-box">
    <!-- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> -->
    <div class="flex item-center justify-center flex-1 px-4 sm:px-6 lg:px-20">
      <div class="flex justify-between h-12 sm:h-16 flex-1">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <router-link to="/" class="flex items-center">
            <img
              src="@/assets/logo-f.png"
              alt="炽焰运动"
              class="sm:h-auto sm:w-auto h-[43px] w-[140px] logo"
              v-if="isHome" />
            <img
              src="@/assets/logo.png"
              alt="炽焰运动2"
              class="sm:h-auto sm:w-auto h-[43px] w-[140px] logo"
              v-else />
            <!-- 移动端导航 -->
          </router-link>
        </div>

        <!-- 桌面端导航 -->
        <div class="hidden md:flex items-center space-x-8">
          <div
            v-for="item in routes"
            :key="item.path"
            v-show="isShowMenu(item)">
            <router-link
              :to="item.path"
              class="hover:text-red-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 navbar"
              :class="{ 'text-red-600': $route.path === item.path }">
              {{ item?.meta.title }}
            </router-link>
          </div>
          <!-- <button
            class="bg-red-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-red-700 transition-colors duration-200">
            联系我们
          </button> -->
        </div>

        <!-- 移动端菜单按钮 -->
        <div class="md:hidden flex items-center">
          <button
            @click="isOpen = !isOpen"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
            <span class="sr-only">打开主菜单</span>
            <svg
              class="h-6 w-6"
              :class="{ hidden: isOpen, block: !isOpen }"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg
              class="h-6 w-6"
              :class="{ hidden: !isOpen, block: isOpen }"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div
      class="md:hidden absolute menu-box"
      :class="{ block: isOpen, hidden: !isOpen }">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <div v-for="item in routes" :key="item.path" v-show="isShowMenu(item)">
          <router-link
            :to="item.path"
            class="block px-3 py-2 rounded-md text-base font-medium text-gray-700"
            :class="{ 'text-white bg-red-400': $route.path === item.path }">
            {{ item?.meta.title }}
          </router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

const routes = ref(useRouter().getRoutes());
const route = useRoute();
// const logoPath = ref(logo);
const isHome = ref(true);
const isOpen = ref(false);
const isShowMenu = (item) => {
  return item.meta.isShow;
};
const changeNavbarStyle = () => {
  const navbar = document.querySelector(".header-box");
  if (!navbar) return;
  if (route.path == "/") {
    navbar.classList.add("fixed");
    navbar.classList.remove("text-black", "bg-white", "shadow-lg");
    navbar.classList.add("text-white");
  } else {
    navbar.classList.add("text-black", "bg-white", "shadow-lg");
    navbar.classList.remove("text-white");
  }
};

watch(
  () => route.path,
  (newPath, oldPath) => {
    if (newPath == '/') {
      isHome.value = true;
    } else {
      isHome.value = false;
    }
    changeNavbarStyle();
  }
);
onMounted(() => {
  changeNavbarStyle();
});
</script>

<style scoped>
/* 添加过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.navbar {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #ff0000;
    transform: translateX(-50%);
    transition: width 0.3s ease;
  }
  &:hover::after {
    width: 60%;
  }
}
.menu-box {
  background: #fff;
  right: 0;
  top: 48px;
  width: 63%;
  height: 100vh;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    /* modal 阴影 */
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
